<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="form">
    <textarea id="source" name="source" rows="8" style="width: 500px;"></textarea>
    <button id="translateBtn" type="button">翻译</button>
    <strong>耗时:</strong><span id="spendTime"></span>
</form>
<textarea id="translation" rows="8" style="width: 500px;"></textarea>

<script src="/components/jquery/dist/jquery.min.js"></script>
<script>
    $(function(){
        $('#translateBtn').on('click', function(){
            $('#translation').val('努力翻译中。。。')
            $.ajax({
                url: '/api/v2/translate',
                data: {
                    source: $('#source').val()
                },
                type: 'POST',
                dataType: 'json'
            }).done((res) => {
                $('#translation').val(res.translation)
                $('#spendTime').text(`${res.spendTime}ms`)
            }).fail((xmlHttpRequest) => {
                $('#translation').val('翻译出了点问题。。。')
                alert(xmlHttpRequest.responseJSON.msg)
            })
            return false
        })
    })
</script>
</body>
</html>